<template>
  <basic-container>
  <el-row >
    <el-col :span="4">
      <avue-tree :loading="loading"  :option="option" :data="data" @node-click="nodeClick" @update="update" @save="save" @del="del" v-model="form">
         <span class="el-tree-node__label" slot-scope="{ node, data }">
            <span>
              <i class="el-icon-user-solid"></i>
              {{ (node || {}).label }}
            </span>
          </span>
      </avue-tree>
    </el-col>
    <el-col :span="20">
      <el-row>
        <basic-container>
          <!--查询信息展示-->
          <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
            <el-form-item label="知识点">
              <el-input v-model="formInline.user" placeholder="输入文字搜索知识点"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="formInline.region" placeholder="活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="分类">
              <el-select v-model="formInline.region" placeholder="活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
              <el-button type="primary" icon="el-icon-plus" @click="addKonwLedge">新增知识点</el-button>
            </el-form-item>
          </el-form>
        </basic-container>
      </el-row>
      <div ref="content">

      </div>

    </el-col>
  </el-row>

    <!--新增知识点按钮点击事件-->
    <el-dialog title="知识点列表"  :visible.sync="dialogFormVisible" width="800px" append-to-body>
      <el-form ref="form" :model="ruleForm" :rules="rules" label-width="90px" size="small">
        <!-- 原始表单 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="问题分类" prop="category">
              <el-radio-group v-model="ruleForm.category" size="small">
                <el-radio-button v-for="(item,index) in questionCategory" :label="item.value" :key="index">{{item.label}}</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否启用" prop="disabled">
              <el-radio-group v-model="ruleForm.disabled">
                <el-radio :label="0">是</el-radio>
                <el-radio :label="1">否</el-radio>

              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="负责人" prop="dutyPerson">
              <el-input v-model="ruleForm.dutyPerson"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="联系电话" prop="tel">
              <el-input v-model="ruleForm.tel"></el-input>
            </el-form-item>
          </el-col>
          <el-button
            size="medium"
            type="text"
            icon="el-icon-circle-plus"
            @click="addPerson"/>
        </el-row>
        <!--新增系统联系人-->
        <el-row v-for="(item,index) in ruleForm.dutyPersonList" :key="index">
          <el-col :span="12">
            <el-form-item label="负责人" prop="dutyPerson">
              <el-input v-model="item.dutyPerson"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="联系电话" prop="tel">
              <el-input v-model="item.tel"></el-input>
            </el-form-item>
          </el-col>
          <el-button
            size="medium"
            type="text"
            icon="el-icon-delete"
            @click="delPerson(index)"/>
        </el-row>


        <el-row>
          <el-col :span="23">
            <el-form-item label="标准问题" prop="similarQuestion">
              <el-input type="textarea" v-model="ruleForm.similarQuestion"  maxlength="100" show-word-limit></el-input>
            </el-form-item>
          </el-col>
          <el-button
            size="medium"
            type="text"
            icon="el-icon-circle-plus"
            @click="addItem"/>
        </el-row>

        <!-- 动态新增相似问题 -->
        <el-row v-for="(item, index) in ruleForm.konwLedgeList" :key="index">
          <el-col :span="23">
            <el-form-item label="相似问题" prop="similarQuestion">
              <el-input type="textarea" v-model="item.similarQuestion"  maxlength="100" show-word-limit></el-input>
            </el-form-item>
          </el-col>
          <el-button
            size="medium"
            type="text"
            icon="el-icon-delete"
            @click="delItem(index)"/>
        </el-row>
        <!--回复答案-->
        <el-row>
          <el-col :span="23">
            <el-form-item label="回复答案" prop="answer">
              <el-input type="textarea" v-model="ruleForm.answer" maxlength="100" show-word-limit></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!--答案连接-->
        <el-row>
          <el-col :span="23">
            <el-form-item label="答案链接" prop="link">
              <el-input v-model="ruleForm.link"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('form')" size="small" icon="el-icon-check">确 定</el-button>
        <el-button @click="dialogFormVisible = false"  size="small" icon="el-icon-close">取 消</el-button>
      </div>
    </el-dialog>

  </basic-container>
</template>



<script>
  import {getQACategory} from "@/api/qa/knowledge";
  export default {
    data () {
      return {
        // 树结构信息展示
        form:{},
        loading:true,
        data:[
          {
            value:0,
            label:'全部分类',
            children:[]
          }
        ],
        option:{
          title:'我是标题',
          filterText:"搜索关键字自定义",
          defaultExpandAll:true,
          filter:false,
          props:{
            labelText:'标题',
            label:'label',
            value:'value',
            children:'children'
          }
        },
        // 查询信息展示
        formInline: {
          user: '',
          region: ''
        },
        // 模态窗口展示
        dialogFormVisible:false,
        // 动态新增知识库列表

        ruleForm: {
          category: 1,
          disabled:0,
          similarQuestion: "",
          konwLedgeList:[],
          answer:'',
          link:'',
          dutyPerson:'',
          tel:'',
          dutyPersonList:[],

        },
        questionCategory:[],
        rules:{
          category:[{ required: true, message: '请选择问题类型', trigger: 'change' }],
          disabled:[{ required: true, message: '请选择是否立即启用', trigger: 'change' }],
          dutyPerson:[{ required: true, message: '请填写系统负责人', trigger: 'blur' }],
          tel:[{ required: true, message: '请填写联系电话', trigger: 'blur' }],
          answer:[{ required: true, message: '请填写答案', trigger: 'blur' }],
          similarQuestion:[{ required: true, message: '请填写问题', trigger: 'blur' }],
        },
      }
    },

    mounted(){
      setTimeout(()=>{
        this.loading = false
      },2000)
    },

    // 填充页面数据
    created() {
      getQACategory("qa_category").then(res => {
        let result = res.data.data;
        for (let i = 0; i< result.length; i++) {
           let obj = {"value":result[i].dictKey, "label":result[i].dictValue};
           this.data[0].children.push(obj);
           this.questionCategory.push(obj)
        }
      })
    },
    methods:{
      // 新增知识点按钮点击事件
      addKonwLedge(){
        this.dialogFormVisible = true;
      },
      // 新增+
      addItem(){
        this.ruleForm.konwLedgeList.push({
          similarQuestion:""
        });
      },
      // 删除-
      delItem(index) {
        this.ruleForm.konwLedgeList.splice(index, 1);
      },
      // 模态窗口新增数据
      submitForm(formName){
        this.$refs[formName].validate((valid) => {
          let obj = this.ruleForm;
          console.log("form----->"+JSON.stringify(obj));
        })
      },
      // 新增联系人
      addPerson(){
        this.ruleForm.dutyPersonList.push({
          dutyPerson:"",
          tel:""
        })
      },
      // 删除联系人
      delPerson(index){
        this.ruleForm.dutyPersonList.splice(index,1);
      },


      tip(node,data){
        this.$message.success(JSON.stringify(data))
      },
      // 删除
      del(data,done){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message.success('删除回调')
          done();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 更新
      update(node,data,done,loading){
        this.$message.success('修改成功');
        done();
      },
      // 保存
      save(node,data,done,loading){
        this.$message.success('新增回调')
        this.form.id = new Date().getTime();
        this.form.value=new Date().getTime();
        this.form.children=[];
        done();
      },

      // 节点点击事件
      nodeClick(data){
        // this.$message.success(JSON.stringify(data))
      },

      // 节点过滤事件
      filterNodeMethod(value,data){
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      }
    }
  }
</script>
<style scoped>

</style>
